import React from "react";
import "./index.css";
import GxlTableHeaderCell from "./Cell";
import {ScrollSyncPane } from "react-scroll-sync";
import ReactDOM from "react-dom";
class GxlTableHeaderRow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedCell: "",
      left:0,
      top:0,
      firstChar: 65,
      charSize: 26,
    };
  }
  genHeaderChars(index) {
    const { charSize, firstChar } = this.state;
    const size = parseInt(index / charSize);
    const currentIndex = index % charSize;
    const start = firstChar + currentIndex;
    let chars = "";
    if (size > 0) {
      for (let i = 0; i < size; i++) {
        chars += "A";
      }
    }
    return chars + String.fromCharCode(start);
  }
  componentDidMount() {
    var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();
    this.setState({
      left: rect.left,
      top: rect.top,
    });
  }
  buildHeader(cols) {
    let i = 0;
    const array = [];
    for (; i < cols; i++) {
      array.push(<GxlTableHeaderCell indexChar={this.genHeaderChars(i)} rowLeft={this.state.left} rowTop={this.state.top} cell={i} key={`header_cell_${i}`} />);
    }
    return array;
  }
  render() {
    return (
      <div className="gxl-table-header-row">
        <div className="gxl-table-header-row-selected-cell-content">
          <input className="gxl-table-cell-content-input" type="text"></input>
        </div>
        <ScrollSyncPane group="h">
          <div className="gxl-table-header-row-cells">
            {this.buildHeader(this.props.cols)}
          </div>
        </ScrollSyncPane>
      </div>
    );
  }
}
export default GxlTableHeaderRow;
